<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Induction Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = 'italic 20px Times New Roman';

        // --- Draw Magnetic Field (X symbols) ---
        function drawX(x, y, size) {
            ctx.beginPath();
            ctx.moveTo(x - size / 2, y - size / 2);
            ctx.lineTo(x + size / 2, y + size / 2);
            ctx.moveTo(x + size / 2, y - size / 2);
            ctx.lineTo(x - size / 2, y + size / 2);
            ctx.stroke();
        }

        const xSpacing = 60;
        const ySpacing = 60;
        const xSize = 10;
        for (let x = 40; x < canvas.width; x += xSpacing) {
            for (let y = 40; y < canvas.height - 50; y += ySpacing) {
                drawX(x, y, xSize);
            }
        }
        
        // --- Draw Circuit Components ---
        const railTopY = 100;
        const railBottomY = 300;
        const railStartX = 100;
        const railEndX = 550;
        const rodX = 400;

        // Draw Rails
        ctx.beginPath();
        ctx.moveTo(railStartX, railTopY);
        ctx.lineTo(railEndX, railTopY);
        ctx.moveTo(railStartX, railBottomY);
        ctx.lineTo(railEndX, railBottomY);
        ctx.stroke();

        // Draw Resistor R
        const resistorWidth = 20;
        const resistorHeight = 60;
        ctx.beginPath();
        ctx.moveTo(railStartX, railTopY);
        ctx.lineTo(railStartX, railTopY + (railBottomY - railTopY - resistorHeight) / 2);
        ctx.rect(railStartX - resistorWidth / 2, railTopY + (railBottomY - railTopY - resistorHeight) / 2, resistorWidth, resistorHeight);
        ctx.moveTo(railStartX, railBottomY - (railBottomY - railTopY - resistorHeight) / 2);
        ctx.lineTo(railStartX, railBottomY);
        ctx.stroke();
        
        // Label for Resistor R
        ctx.font = '22px Times New Roman';
        ctx.fillText('R', railStartX - 40, (railTopY + railBottomY) / 2 + 8);

        // Draw Conducting Rod MN
        ctx.beginPath();
        ctx.moveTo(rodX, railTopY);
        ctx.lineTo(rodX, railBottomY);
        ctx.stroke();

        // Draw hooks on the rod
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        // Top hook at M
        ctx.arc(rodX - 5, railTopY, 5, -0.5 * Math.PI, 0.5 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        // Bottom hook at N
        ctx.arc(rodX - 5, railBottomY, 5, -0.5 * Math.PI, 0.5 * Math.PI);
        ctx.stroke();
        ctx.lineWidth = 2;


        // Labels for Rod MN
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('M', rodX + 5, railTopY - 10);
        ctx.fillText('N', rodX + 5, railBottomY + 25);
        
        // Draw Velocity Vector v
        const velocityY = (railTopY + railBottomY) / 2;
        const arrowStartX = rodX + 10;
        const arrowEndX = rodX + 100;
        ctx.beginPath();
        ctx.moveTo(arrowStartX, velocityY);
        ctx.lineTo(arrowEndX, velocityY);
        // Arrowhead
        ctx.moveTo(arrowEndX, velocityY);
        ctx.lineTo(arrowEndX - 10, velocityY - 6);
        ctx.moveTo(arrowEndX, velocityY);
        ctx.lineTo(arrowEndX - 10, velocityY + 6);
        ctx.stroke();

        // Label for Velocity v
        ctx.font = 'italic bold 22px Times New Roman';
        ctx.fillText('v', (arrowStartX + arrowEndX) / 2 - 5, velocityY - 15);

        // --- Draw Bottom Text ---
        ctx.font = '20px "SimSun", "STSong"'; // Common Chinese fonts
        ctx.textAlign = 'center';
        ctx.fillText('习题 9-9 图', canvas.width / 2, canvas.height - 20);

    </script>
</body>
</html>